
<!doctype html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
        <title>Layout Responsivo</title>  
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">  
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
        <link href="bootstrap/css/myStyle.css" rel="stylesheet">
        <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">  
        <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">  
        <script src="http://code.jquery.com/jquery-latest.js"></script>  
        <script src="bootstrap/js/bootstrap.min.js"></script>  
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner"> 
                <a class="brand" href="#">Sistema Estoque</a>
                <div class="container">   

                    <!-- isto cria um botão com 3 linhas que indica que o menu está aí  -->   

                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">   
                        <span class="icon-bar"></span>   
                        <span class="icon-bar"></span>  
                        <span class="icon-bar"></span> </a>            
                    <!-- A lista de links no cabeçalho usando a classe nav-collapse para esconder os links quando a largura do navegador ficar muito pequena. -->  
                    <div class="nav-collapse">  
                        <ul class="nav">  
                            <li> <a href="#">Home</a> </li>  
                            <li> <a href="#">Relatorios</a> </li>  
                            <li> <a href="#">Planilhas</a> </li>  
                            <li> <a href="#">Manual</a> </li>  
                            <li> <a href="#">Sair</a> </li>  
                        </ul>  
                    </div>  
                </div>  
            </div>  
        </div>
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span3">
                    <div class="well sidebar-nav">                        
                        <ul class="nav nav-list">
                            <li class="nav-header">Menu Principal</li>
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Categorias</a></li>
                            <li><a href="#">Fornecedores</a></li>
                            <li><a href="#">Produtos</a></li>
                            <li><a href="#">Entradas</a></li>
                            <li><a href="#">Saídas</a></li>
                            <li><a href="#">Departamentos</a></li>
                            <li><a href="#">Funcionários</a></li>
                            <li class="nav-header">Outros</li>                            
                            <li><a href="#">Link</a></li>
                            <li class="nav-header">Ajuda</li>
                            <li><a href="#">Suporte</a></li>                                      
                        </ul>
                    </div><!--/.well -->
                </div><!--/span-->
                <div class="span9">
                    <div class="hero-unit" align="justify">
                        <h3>Seja bem vindo!</h3>
                        <p class="">
                            O sistema de controle de estoque tem como principal objetivo colaborar
                            para o gerenciamento de materiais de escritório. O utilizador do sistema
                            poderá cadastrar categorias, produtos, registrar entrada e saída de produtos,
                            bem como, gerar relatórios para análise de pedidos. Além disso, o sistema
                            em questão sempre emitirá um alerta quando determinado produto estiver em
                            seu limite mínimo determinado pelo administrador do sistema. Para obter mais
                            informacoes, clique em manual do usuario abaixo.
                        </p>
                        <p><a class="btn btn-primary btn-large">Manual do usuario</a></p>
                    </div>
                    <div class="row-fluid">
                        <div class="span4" align="justify">
                            <h4>Produtos em nível baixo</h4>
                            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                            <p><a class="btn btn-danger" href="#">Detalhes</a></p>
                        </div><!--/span-->
                        <div class="span4" align="justify">
                            <h4>Lista completa de produtos</h4>
                            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                            <p><a class="btn btn-success" href="#">Detalhes</a></p>
                        </div><!--/span-->
                        <div class="span4" align="justify">
                            <h4>Últimos cadastros</h4>
                            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                            <p><a class="btn btn-info" href="#">Detalhes</a></p>
                        </div><!--/span-->
                    </div><!--/row-->

                </div><!--/span-->
            </div><!--/row-->
            <hr>
            <footer class="footer">
                <p>&copy; Sistema Estoque - GLESP 2014</p>
            </footer>
        </div>
    </body>  
</html>  
